<!doctype html>
<html>
<head>
  <!-- This page is used to test examples -->
  <title>Vue JS Examples</title>
  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

  <script
      src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.7.0/document-register-element.js"></script>
  <script src="VueGwtExamples/VueGwtExamples.nocache.js"></script>
</head>
<body>
<div class="row">
  <div class="col s12 m6 l4">
    <h5 class="custom-color">Custom Element (Animal Selector)</h5>
    <animal-selector user-name="Tom"></animal-selector>

    <h5>Emit Annotation</h5>
    <div id="emitAnnotation"></div>

    <h5>Pass Values</h5>
    <div id="passValues"></div>

    <h5>Simple Link Component</h5>
    <div id="simpleLinkComponent"></div>

    <h5>Link Component</h5>
    <div id="linkComponent"></div>

    <h5>Can Hide Component</h5>
    <div id="canHideComponent"></div>

    <h5>Simple Todo List Component</h5>
    <div id="simpleTodoListComponent"></div>

    <h5>Exclamation Component</h5>
    <div id="exclamationComponent"></div>

    <h5>Message Component</h5>
    <div id="messageComponent"></div>

    <h5>Parent Component</h5>
    <div id="parentComponent"></div>

    <h5>Todo List Component</h5>
    <div id="todoListComponent"></div>

    <h5>Melisandre Component</h5>
    <div id="melisandreComponent"></div>

    <h5>Simple Render Component</h5>
    <div id="renderAppComponent"></div>
  </div>
  <div class="col s12 m6 l4">
    <h5>Got Quotes</h5>
    <div id="gotQuotesComponent"></div>

    <h5>Instantiated JS Vue</h5>
    <div id="fullJsComponent"></div>

    <h5>Instantiated JS Vue With methods</h5>
    <div id="fullJsWithMethodsComponent"></div>

    <h5>Extend JS Component</h5>
    <div id="extendJsComponent"></div>

    <h5>Extend Java Component</h5>
    <div id="extendJavaComponent"></div>

    <h5>Focus Directive</h5>
    <div id="focusDirectiveComponent"></div>

    <h5>Kitten Component</h5>
    <div id="kittenComponent"></div>

    <h5>Reverse Component</h5>
    <div id="reverseComponent"></div>

    <h5>v-for with Index Component</h5>
    <div id="vForWithIndexComponent"></div>

    <h5>v-for with Range Component</h5>
    <div id="vForWithRangeComponent"></div>

    <h5>v-for on Object Component</h5>
    <div id="vForOnObjectComponent"></div>
    <div id="vForOnObjectWithKeyComponent"></div>
    <div id="vForOnObjectWithKeyAndIndexComponent"></div>

    <h5>Even numbers Component</h5>
    <div id="evenNumbersComponent"></div>

    <h5>Recursive Component</h5>
    <div id="recursiveComponent"></div>
  </div>
  <div class="col s12 m6 l4">
    <h5>Error Boundary</h5>
    <div id="errorBoundary"></div>

    <h5>Binding inline Style Component</h5>
    <div id="bindInlineStyleComponent"></div>

    <h5>Prop Default Value Component</h5>
    <div id="propDefaultValueComponent"></div>

    <h5>Button +1 Component</h5>
    <div id="buttonPlusOneComponent"></div>

    <h5>Greet Component</h5>
    <div id="greetComponent"></div>
    <div id="hiWhatComponent"></div>

    <h5>v-on With DOM Event Component</h5>
    <div id="vOnWithDOMEventComponent"></div>

    <h5>Todo Text Component</h5>
    <div id="todoTextComponent"></div>

    <h5>Todo Text Computed Component</h5>
    <div id="todoTextComputedComponent"></div>

    <h5>Share Data Model Component</h5>
    <div>
      <span id="sharedDataModelComponent1"></span>
      <span id="sharedDataModelComponent2"></span>
      <span id="sharedDataModelComponent3"></span>
    </div>

    <h5>Counter With Event Component</h5>
    <div id="counterWithEventComponent"></div>

    <h5>Tree Component</h5>
    <div id="treeComponent"></div>
  </div>
</div>

</body>
</html>
